@import './global.css';
@import './type.css';

body {
  margin: 0;
  padding: 0;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrapper {
  bottom: 0;
  left: 0;
  padding-top: var(--header-height);
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  z-index: var(--normal-index);
}

.bodyWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 0;

  & > section {
    margin-top: 73px;
    width: 100%;
    opacity: 0;
    transition: all ease 250ms;
    position: relative;
    z-index: -1;
    height: calc(100% - 73px);
    display: flex;
    flex-direction: column;
    overflow: auto;
    background-color: var(--color-body-bg);
  }

  &.loaded > section {
    opacity: 1;
  }
}

.hasMarginBottom {
  margin-bottom: 20px;
}

/* move to type */
.text-center {
  text-align: center;
}

.mainContent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  margin: 0 auto;
  width: 100%;
}

.mainBox {
  max-width: var(--main-box-width);
}

:global(.offlineWrapper) {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
}

@media (--medium-viewport) {
  .bodyWrapper {
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;

    & > section {
      padding: 0;
    }
  }
}

@media (--large-viewport) {
  body {
    font-size: 15px;
  }

  .mainBox {
    box-sizing: border-box;
    padding: 0 24px;
  }
}

@media (--small-viewport) {
  html.on-device,
  html.on-device body {
    -webkit-overflow-scrolling: touch !important;
    overflow: auto !important;
    height: 100% !important;
  }
}
